<template>
  <j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="close"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="close" cancelText="关闭">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <!--        <a-row :gutter="24">-->
        <!--          <a-col :span="6">-->
        <!--            <a-form-model-item label="姓名">-->
        <!--              <j-input v-model="queryParam.fullName"/>-->
        <!--            </a-form-model-item>-->
        <!--          </a-col>-->
        <!--          <a-col :span="6">-->
        <!--            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">-->
        <!--              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
        <!--              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
        <!--            </span>-->
        <!--          </a-col>-->
        <!--        </a-row>-->
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
      <!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
      <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
      <!--      </div>-->

      <a-table ref="table" size="middle" :scroll="{ x: true }" :bordered="false" rowKey="user.id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text,record">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt=""
            style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <!--          <a-divider type="vertical" />-->
          <!--          <a-dropdown>-->
          <!--            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>-->
          <!--            <a-menu slot="overlay">-->
          <!--              <a-menu-item>-->
          <!--                <a @click="handleDetail(record)">详情</a>-->
          <!--              </a-menu-item>-->
          <!--              <a-menu-item>-->
          <!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
          <!--                  <a>删除</a>-->
          <!--                </a-popconfirm>-->
          <!--              </a-menu-item>-->
          <!--            </a-menu>-->
          <!--          </a-dropdown>-->
        </span>

      </a-table>
    </div>
  </j-modal>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'HcMerchantAfterSalesListModal',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
  },
  data() {
    return {
      title: '',
      width: 1200,
      visible: false,
      disableSubmit: false,
      description: '售后订单列表',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '门店名称',
          align: 'center',
          dataIndex: 'storeName'
        },
        {
          title: '序号',
          align: 'center',
          dataIndex: 'hcOrderMerchant.pickingSerialNo'
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'hcOrderMerchant.nameTakingMeal'
        },
        {
          title: '地址',
          align: 'center',
          dataIndex: 'hcOrderMerchant.pickingAddress'
        },
        {
          title: '手机',
          align: 'center',
          dataIndex: 'hcOrderMerchant.phoneTakingMeals'
        },
        {
          title: '菜品',
          align: 'center',
          dataIndex: 'nameDishes',
        },
        {
          title: '消费金额',
          align: 'center',
          dataIndex: 'totalPrice',
        },
        {
          title: '餐品问题',
          algin: 'center',
          dataIndex: 'foodProblems',
        },
        {
          title: '图片',
          algin: 'center',
          dataIndex: 'picture',
          scopedSlots: { customRender: 'imgSlot' },
        },
        {
          title: '投诉建议',
          algin: 'center',
          dataIndex: 'feedback',
        },
        {
          title: '提交时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '处理时间',
          align: 'center',
          dataIndex: 'processingTime',
        },
        {
          title: '处理状态',
          algin: 'center',
          dataIndex: 'state',
        },
        {
          title: '退款金额',
          algin: 'center',
          dataIndex: 'refundAmount',
          customRender: (value, row, index) => {
            return value ? value : '无'
          },
        },
        {
          title: '扣除商家金额',
          algin: 'center',
          dataIndex: 'deductMerchantAmount',
          customRender: (value, row, index) => {
            return value ? value : '无'
          },
        },
        {
          title: '扣除备注',
          algin: 'center',
          dataIndex: 'deductionRemarks',
          customRender: (value, row, index) => {
            return value ? value : '无'
          },
        },
        {
          title: '驳回原因',
          algin: 'center',
          dataIndex: 'reasonRejection',
          customRender: (value, row, index) => {
            return value ? value : '无'
          },
        },
        {
          title: '门店累计投诉次数',
          algin: 'center',
          dataIndex: 'complaintCount',
          customRender: (value, row, index) => {
            return value + '次'
          },
        },
      ],
      url: {
        list: '/hc/hcAfterSales/list',
        delete: '/hc/hcOrder/delete',
        deleteBatch: '/hc/hcOrder/deleteBatch',
        exportXlsUrl: '/hc/hcOrder/exportXls',
        importExcelUrl: 'hc/hcOrder/importExcel',
      },
      dictOptions: {},
      superFieldList: [],
      disableMixinCreated: true,
      record: {},
    }
  },
  created() {

  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    searchReset() {
      this.queryParam = {};
      this.queryParam.merchantId = this.record.merchantId;
      this.loadData(1);
    },
    open(type, record) {
      this.record = record;
      this.queryParam.merchantId = this.record.merchantId;
      if (type == 'personal') {
        this.url.list = '/hc/hcAfterSales/list'
      } else if (type == 'company') {
        this.url.list = '/hc/hcCompanyFoodOrder/getPageList'
      }
      this.loadData();
      this.visible = true
    },
    close() {
      this.visible = false;
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>